import React, { ReactElement } from 'react'
import Style from './index.less'
import Logo from '../../assets/images/logo-250px.png'
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useDispatch } from 'umi'

interface Props {

}

export default function Index({ }: Props): ReactElement {
  const dispatch = useDispatch()
  const onFinish=(values:any)=>{
    // console.log(values);
    dispatch({
      type:'loginModel/Login',
      payload:values
    })
    
  }
  const onFinishFailed=()=>{

  }
  return (
    <div className={Style.box}>
                <div className={Style.login}>
                    <div className={Style.logo}>
                        <img src={Logo} alt="" className={Style.logoImg}/>
                    </div>
                    <div className={Style.content}>
                        <Form
                            name="normal_login"
                            className={Style.loginForm}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                        >
                            <Form.Item
                                name="account"
                                rules={[
                                    {
                                        required: true,
                                        message: '用户名不能为空',
                                    },
                                    {
                                        pattern: /^[A-Za-z_]+/,
                                        message: '必须以字母开头',
                                    },
                                    {
                                        min: 4,
                                        message: '最少4个字符',
                                    },
                                    {
                                        max: 10,
                                        message: '最多10个字符',
                                    }
                                ]}
                            >
                                <Input prefix={<UserOutlined className={Style.siteFormItemIcon} />} placeholder="用户名" />
                            </Form.Item>
                            <Form.Item
                                name="password"
                                rules={[
                                    {
                                        required: true,
                                        message: '密码不能为空',
                                    },
                                    {
                                        pattern: /^[\d]{6}$/,
                                        message: '必须是6位数字',
                                    },
                                ]}
                            >
                                <Input
                                    prefix={<LockOutlined className={Style.siteFormItemIcon} />}
                                    type="password"
                                    placeholder="密码"
                                />
                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" htmlType="submit" className={Style.loginFormButton}>
                                    登录
                            </Button>
                            未注册？<a href="">去注册</a>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
  )
}
